<script setup lang="ts">

import { onMounted, reactive } from "vue";
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const vdata = reactive({
    goods: {},
    active: 1,
    form: {}
})
onMounted(() => {
    console.log(route.query)
    vdata.goods = { ...route.query }
})
const nextStep = () => {
    //跳转下一步直接到首页
    vdata.active++
    router.push("/")
}
const addresses = [
    {
        id: 1,
        address: '**省**市******街道**号*栋*单元**号'
    },
    {
        id: 2,
        address: '**省**市******街道**号*栋*单元**号'
    }
]
const coupons = [
    {
        id: 1,
        name: '满300减6'
    },
    {
        id: 2,
        name: '95折券'
    }
]
const payWays = [
    {
        id: 1,
        name: '微信'
    },
    {
        id: 2,
        name: '支付宝'
    }
]
</script>
<template>
    <div class="confirm">
        <el-steps :active="vdata.active" style="width: 600px;">
            <el-step title="选择信息" />
            <el-step title="支付" />
            <el-step title="确认收货" />
            <el-step title="评价" />
        </el-steps>
        <div v-if="vdata.active == 1" class="form_box">
            <el-form :model="vdata.form" label-width="auto">
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="收货地址">
                            <el-select v-model="vdata.form.addressId" placeholder="请选择收货地址">
                                <template v-for="(item, index) in addresses" :key="index">
                                    <el-option :label="item.address" :value="item.id" />
                                </template>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="优惠券">
                            <el-select v-model="vdata.form.couponId" placeholder="请选择优惠券"
                                :disabled="!vdata.form.addressId">
                                <template v-for="(item, index) in coupons" :key="index">
                                    <el-option :label="item.name" :value="item.id" />
                                </template>

                            </el-select>
                        </el-form-item>
                        <el-form-item label="支付方式">
                            <el-select v-model="vdata.form.paway" placeholder="请选择支付方式"
                                :disabled="!vdata.form.addressId">
                                <template v-for="(item, index) in payWays" :key="index">
                                    <el-option :label="item.name" :value="item.id" />
                                </template>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3" style="margin-left: 20px;">
                        <el-form-item>
                            <div class="good_img">
                                <img :src="vdata.goods.goodsBanner" alt="" srcset="" />
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="nextStep" style="width: 80px;">
                                <el-icon>
                                    <Checked />
                                </el-icon>下单
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>


            </el-form>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.confirm {
    width: 600px;
    margin: 0 auto;
    margin-top: 20px;
    background-color: #fff;
    padding: 20px;

    ::v-deep(.el-step__head) {
        border-color: #888686;
        color: #272424;

    }

    ::v-deep(.el-step__head.is-finish) {
        border: none !important;

        .el-step__icon.is-text {
            border: none !important;

            background-color: rgb(235, 58, 58);
        }
    }

    .form_box {
        width: 100%;
        margin-top: 50px;


    }

    .good_img {
        width: 80px;
        height: 80px;

        img {
            width: 80px;
            height: 80px;
        }
    }

}
</style>